<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /*全局样式 */
        html, body, #app {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 卡片区域 */
        .el-card {
            box-shadow: 0 1px 1px rgba(0, 8, 10, 0.15);
        }

        /* 表格样式 */
        .el-table {
            margin-top: 15px;
            font-size: 12px;
            min-width: 350px;
        }

        /*布局充满：container下的每个块充满*/
        .home-container {
            height: 100%;
        }

        /*头样式*/
        .el-header {
            background-color: #373d41;
            display: flex;
            justify-content: space-between;
            /*左右分布 padding-left: 0;*/
            /*logo图片距左为0 align-items: center;*/
            /*水平居中 color: #fff;*/
            /*文字颜色 font-size: 20 px;*/
        }

        .lt_info {
            /*左侧div(logo和文字) 加布局 display: flex;*/
            display: flex;
            align-items: center;
        }

        .lt_info span {
            color: aqua;
            margin-left: 10px;
            font-size: 20px;
        }

        .user_info {
            /*小手*/
            cursor: pointer;
            display: flex;
            padding: 0 10px;

        }

        .user_desc {
            /*伸缩盒子*/
            display: flex;
            /*justify-content: center;*/
            /*垂直居中*/
            align-items: center;
        }

        /*左上角logo*/
        .logo_img {
            width: 55px;
            height: 55px;
            margin: 0 30px;
        }

        /*底部*/
        .el-footer {
            background-color: #373d41;
            color: aqua;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            /*background: url("./images/bg.jpg");*/
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            /*line-height: 160px;*/
        }

    </style>
</head>
<body>
<div id="app">

    <el-container class="home-container">
        <el-header>
            <div class="lt_info">
                <img src="./images/logo.jpg" alt="编程之外" class="logo_img"/>
                <span>编程之外の全国旅游景点</span>
            </div>

            <div class="user_info">
                <el-dropdown class="user_desc">
                    <div style="">
                        <img src="./images/toux.jpg" style="width: 30px;border-radius: 50%;" alt=""/>
                    </div>
                    <div style="">
                        <span style="font-size: 16px;color: aqua;padding: 5px">
                        username
                    </span>
                    </div>
                    <!--下拉菜单 margin-right: 50px;-->
                    <div>
                        <el-dropdown-menu slot="dropdown" style="box-shadow: 0 0 10px 5px rgba(54,45,255,0.9);">
                            <el-dropdown-item @click.native="logout">安全退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </div>
                </el-dropdown>
            </div>
        </el-header>

        <el-main>
            <div>
                <!-- 卡片视图区 -->
                <el-card>
                    <el-row :gutter="25">
                        <el-col :span="10">
                            <!-- query 搜索(模糊查询) -->
                            <el-input placeholder="请输入要查询的省份" v-model="query" clearable @clear="getList">
                                <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
                            </el-input>
                        </el-col>
                        <!--添加-->
                        <el-col :span="4">
                            <el-button type="primary" @click="addDialogVisible = true">添加数据</el-button>
                        </el-col>
                    </el-row>
                    <!-- 用户列表 -->
                    <el-table :data="provincesList" border stripe>
                        <el-table-column label="ID" prop="id"></el-table-column>
                        <el-table-column label="省份" prop="name"></el-table-column>
                        <el-table-column label="标签" prop="tags"></el-table-column>
                        <el-table-column label="景点个数" prop="placecounts"></el-table-column>

                        <el-table-column label="操作" class="right_operation">
                            <template slot-scope="scope">
                                <!-- 修改 -->
                                <el-button type="primary" icon="el-icon-edit" size="mini"
                                           @click="showEditDialog(scope.row.id)"></el-button>
                                <!-- 删除 -->
                                <el-button type="danger" icon="el-icon-delete" size="mini"
                                           @click="deleteUser(scope.row.id)"></el-button>
                                <!-- 权限 -->
                                <!--<el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false">-->
                                <!--    <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>-->
                                <!--</el-tooltip>-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页：:current-page 当前页码 -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[1, 5, 10, 100]"
                            :page-size="pageSize"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totals"
                    ></el-pagination>
                </el-card>
                <!-- 卡片视图区结束 -->

                <!--添加数据对话框-->
                <el-dialog title="添加数据" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
                    <!-- 内容主体区域 -->
                    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
                        <!-- 省份 -->
                        <el-form-item label="省份" prop="name">
                            <el-input v-model="addForm.name"></el-input>
                        </el-form-item>
                        <!-- 标签 -->
                        <el-form-item label="标签" prop="tags">
                            <el-input v-model="addForm.tags"></el-input>
                        </el-form-item>
                        <!-- 景点个数 -->
                        <el-form-item label="景点个数" prop="placecounts">
                            <el-input v-model="addForm.placecounts"></el-input>
                        </el-form-item>
                    </el-form>
                    <!-- 内容底部区域 -->
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveProvinceInfo">确 定</el-button>
                    </span>
                </el-dialog>
                <!--添加数据对话框结束-->
            </div>
        </el-main>

        <el-footer>编程之外</el-footer>

    </el-container>

</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            query: "", // 查询信息  name  ==》模糊查询
            provincesList: [],// 省份信息列表
            page: 1,  // 当前页码
            pageSize: 5, // 每页数据条数
            totalPage: 0,  // 总页数
            totals: 0, // 数据总条数

            addDialogVisible: false,// 添加数据对话框显示
            // 添加数据表单项 请求参数
            addForm: {},
            // 添加数据对话框验证规则
            addFormRules: {
                name: [
                    {required: true, message: "省份名称", trigger: "blur"},
                    {min: 3, max: 12, message: "长度在 3 ~ 12 个字符", trigger: "blur"}
                ],
                tags: [
                    {required: true, message: "标签", trigger: "blur"}
                ],
                placecounts: [
                    {required: true, message: "景点个数", trigger: "blur"}
                ],
            },

        },
        //created()： vue生命周期函数，页面创建时执行
        created() {
            this.getList();
        },
        methods: {
            getList() {  //查询所有
                _this = this;
                // 这里携带的请求参数（name page 和 rows）必须和后端findByPage方法中的参数名相同
                axios.get("http://localhost:8081/findByPage?name=" + this.query + "&page=" + this.page + "&rows=" + this.pageSize).then((res) => {
                    console.log("dsfsd000:", res);
                    _this.provincesList = res.data.provinceList;
                    _this.page = res.data.page;  //当前页码
                    _this.totalPage = res.data.sumPage; //总页数
                    _this.totals = res.data.totals;  //数据总条数
                });
            },
            // 监听pageSize改变的事件
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                console.log("每页多少条数据：", newSize);
                this.getList(); // 数据发生改变重新申请数据
            },
            // 监听pageNum改变的事件
            handleCurrentChange(newPage) {
                console.log("当前页码：" + newPage);
                this.page = newPage;
                this.getList(); // 数据发生改变重新申请数据
            },

            // 监听添加用户对话框（关闭）
            addDialogClosed() {
                this.$refs.addFormRef.resetFields();// 重置表单项
            },
            // 添加用户
            saveProvinceInfo() {
                axios.post("http://localhost:8081/add", this.addForm).then((res) => {
                    if (res.data.state) {
                        // alert(res.data.msg);//添加成功
                        this.$message.success("添加成功！！！");
                        //隐藏
                        this.addDialogVisible = false;
                        this.getList();
                    } else {
                        // alert(res.data.msg);//添加失败
                        this.$message.error("添加失败！！！");
                    }
                })
            },
            // =========添加省份数据结束========
            // ====删除按钮====
            async deleteUser(id){
                // 弹框
                const confirmResult = await this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err);
                // 成功删除为confirm 取消为 cancel
                if(confirmResult!=='confirm'){
                    return this.$message.info("已取消删除");
                }
                // const {data:res} = await this.$http.delete("deleteUser?id="+id);
                axios.get("http://localhost:8081/delete?id="+id).then((res)=>{
                    if (res.data.state){
                        this.$message.success("删除成功！！！");
                        this.getList();
                        // location.reload(true) //刷新当前页面
                    }else {
                        this.$message.error("删除失败！！！");
                    }
                });

            },
            // ====删除方法结束====
        }
    })
</script>
</html>
